<template>
	<view class="content">
		<swiper indicator-dots="true" duration="500">
			<swiper-item class="d-flex center align-center" v-for="(item,index) in imgList" :key="index">
				<view class="imgBOX">
					<img class="img" :src="item.src" alt="">
				</view>
			</swiper-item>
		</swiper>
		<view class="bottom d-flex flex-column align-center">
			<view class="bottom-box">
				<view class="namePoint d-flex space-between">
					<text class="name">{{name}}</text>
					<view class="price">
						<text class="price-1">￥{{price}}</text>
						<text class="price-2">/天</text>
					</view>
				</view>
				<view class="licenseNum d-flex flex-start">
					<text class="license">{{licenseNum}}</text>
				</view>
				<view class="rate">
					<view class="keys">车辆评分</view>
					<uni-rate :margin="5" color="#D6D6D6" active-color="#B6914E"
					 style="margin-left: 15rpx;margin-right: 15rpx;"
					 :readonly="true" :value="carOutLook" size="14"></uni-rate>
					<text style="font-size: 24rpx;font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;color: #333333;">
					{{carOutLook}}分</text>
				</view>
			</view>
			<view class="bottom-box">
				<view class="carProperty">
					<view class="property">车辆配置</view>
					<view class="carInfo">
						<view class="key-value">
							<view class="key">年龄</view>
							<view class="value">1年</view>
						</view>
						<view class="key-value">
							<view class="key">排量</view>
							<view class="value">5.0L</view>
						</view>
						<view class="key-value">
							<view class="key">油型/电动</view>
							<view class="value">98号汽油</view>
						</view>
						<view class="key-value">
							<view class="key">邮箱容量</view>
							<view class="value">45L</view>
						</view>
						<view class="key-value">
							<view class="key">座位</view>
							<view class="value">2位</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom-box">
				<view class="carProperty">
					<view class="car-decribe">车辆描述</view>
					<view class="carDescribe">这是一辆劳斯莱斯，黑色的，好车车这是一辆劳斯莱斯，黑色的，好车车这是一辆劳斯莱斯。</view>
				</view>
			</view>
			<view class="schedule">
				<view class="car-schedule">
					车辆档期
				</view>
				<uni-calendar 
				date="2020-12-28"
				:selected="selected" 
				:showMonth="false" 
				:rang="true" 
				:insert="true" 
				:start-date="'2019-3-2'" 
				:end-date="'2019-5-20'"
				 @change="change">
				</uni-calendar>
			</view>
			
		</view>
		<view class="button">
			<view class="appointment" @click="makeAppoint">
				{{isMade?'已预订，等待商家联系':'立即预约'}}
			</view>
		</view>
	</view>
</template>

<script>
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
	import icons from "../../common/icons.js"
	export default {
		components: {
			uniCalendar
		},
		data() {
			return {
				imgList:[
				{
					src:icons.icons.picCar,
					name:"法拉利 458",
					point:"4.5",
					price:"45522",
					tagName:"诚信联盟",
					licenseNum:"川A9999",
					carAge:"99",
					times:'8'
				},
				{
					src:icons.icons.picCar,
					name:"法拉利 458",
					point:"4.5",
					price:"45522",
					tagName:"诚信联盟",
					licenseNum:"川A9999",
					carAge:"99",
					times:'8'
				},
				{
					src:icons.icons.picCar,
					name:"法拉利 458",
					point:"4.5",
					price:"45522",
					tagName:"诚信联盟",
					licenseNum:"川A9999",
					carAge:"99",
					times:'8'
				}
				],
				selected: [{
					date: '2020-12-26',
					info: '起租',
					data: {
						custom: '自定义信息',
						name: '自定义消息头',
					}},
					{
						date: '2020-12-27',
						info: '',
						data: {
							custom: '自定义信息',
							name: '自定义消息头',
						}},
					{
						date: '2020-12-28',
						info: '还车',
						data: {
							custom: '自定义信息',
							name: '自定义消息头',
						}},
				],
				name:"法拉利 458",
				point:"4.5",
				price:"45522",
				tagName:"诚信联盟",
				licenseNum:"川A9999",
				carAge:"99",
				times:'8',
				startDate:"2020/10/01",
				endDate:"2020/11/12",
				carOutLook:3.5,
				isMade:false,
			}
		},
		methods: {
			makeAppoint(){
				this.isMade = true;
			}
		}
	}
</script>

<style>
	page{
		display: flex !important;
		justify-content: center;
		align-items: center;
		background-color: #EDEDED;
	}
</style>

<style scoped>
	.car-schedule {
		width: 92vw;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	
	.schedule {
		margin-top: 20rpx;
		padding-top: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100vw;
		background: #FFFFFF;
	}
	.car-decribe{
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.carInfo{
		display: flex;
		justify-content: space-evenly;
		width: calc(100vw - 60rpx);
		margin-top: 16rpx;
	}
	.property{
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.licenseNum{
		width: calc(100vw - 60rpx);
		margin-bottom: 15rpx;
	}
	.license{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #292929;
		margin: 30rpx 0 15rpx 0;
	}
	.bottom-box{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: calc(100vw - 50rpx);
		border-bottom: 1px solid #ECECEC;
	}
	.bottom{
		width: 100vw;
		background-color: #FFFFFF;
		margin-bottom: 110rpx;
	}
	.button{
		position: fixed;
		bottom: var(--window-bottom);
		padding: 0 6rpx;
		margin-bottom: 12rpx;
	}
	.appointment{
		display: flex;
		justify-content: center;
		align-items: center;
		background: #000000;
		font-size: 36rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #B6914E;
		width: calc(100vw - 50rpx);
		height: 44px;
	}
	.carDescribe{
		word-break: break-all;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 44rpx;
		margin-top: 16rpx;
	}
	.key-value{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		
	}
	.value{
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-top: 16rpx;
	}
	.key{
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}
	.carProperty{
		width: calc(100vw - 60rpx);
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}
	.keys{
		/* display: flex;
		justify-content: flex-end;
		width: 170rpx; */
	}
	.rate{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: calc(100vw - 60rpx);
		margin-bottom: 30rpx;
	}
	.date{
		font-size: 30rpx;
		margin-left: 24rpx;
	}
	.price-2{
		color:  #999999;
		font-size: 24rpx;
		font-family: PingFangSC-Semibold;
		font-weight: normal;
	}
	.price-1{
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #B6914E;
		margin-right: 24rpx;
	}
	.namePoint{
		width: calc(100vw - 60rpx);
		margin-top: 30rpx;
		margin-bottom: 10rpx;
	}
	.name{
		font-size: 40rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #292929;
		/* margin-left: 24rpx; */
	}
	swiper{
		width: calc(100%);
		min-height: 200px;
		background-color: #FFFFFF;
	}
	.content {
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: calc(100%);
		/* width: 100%; */
		/* padding: 0 15rpx; */
		min-height: 100vh;
		background: #FFFFFF;
	}
	.imgBOX{
		display: flex;
		justify-content: center;
		align-items: center;
		/* padding: 6rpx 20rpx; */
	}
	.img{
		width: 100vw;
		/* height: 230rpx; */
	}
	.align-start{
		align-items: flex-start !important;
	}
	.align-center {
		align-items: center !important;
	}
	
	.flex-start {
		justify-content: flex-start !important;
	}
	
	.flex-column {
		flex-direction: column !important;
	}
	
	.d-flex {
		display: flex !important;
	}
	
	.space-between {
		justify-content: space-between !important;
	}
	.center{
		justify-content: center !important;
	}
</style>
